<template>
  <view class="home-container" :style="{ paddingBottom: tabbarHeight + 'px' }">
    <Search></Search>
    <Swiper></Swiper>
    <GridCom></GridCom>
    <List></List>
    <!-- <WaterList :data='arrList'></WaterList> -->

    <Tabbar></Tabbar>
  </view>
</template>
<script setup>
import Tabbar from "../../component/Tabbar";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useTabbarStore } from "../../store";
import Search from "./component/search";
import Swiper from "./component/swiper";
import GridCom from "./component/grid";
import List from "./component/list";
import { ref } from "vue";
import WaterList from "../../component/waterList/index.vue";
const tabbarStore = useTabbarStore();
const { selected, tabbarHeight } = storeToRefs(tabbarStore);

onMounted(() => {
  tabbarStore.setSelected(0);
});

const arrList = ref([
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 1,
    is_label: 1,
    label_name: "测试标签",
    line_price: "0.00",
    name: "瀑布流测试标题",
    price: "0.00",
  },
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 2,
    is_label: 2,
    label_name: "",
    line_price: "10.00",
    name: "瀑布流测试标题1",
    price: "10.00",
  },
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 3,
    is_label: 1,
    label_name: "测试标签2",
    line_price: "20.00",
    name: "瀑布流测试标题2",
    price: "20.00",
  },
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 4,
    is_label: 1,
    label_name: "测试标签3",
    line_price: "303.00",
    name: "瀑布流测试标题3",
    price: "303.00",
  },
]);
</script>
<style lang="scss">
.home-container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
